<template>
  <!--    面包屑导航-->
    <div style="margin-top: 20px;margin-left: 20px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item ><b>计划中心</b></el-breadcrumb-item>
            <el-breadcrumb-item>个人计划</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="button-container" style="margin-top: 20px; margin-left: 20px">
        <el-button type="primary" @click="addPlan">
            添加计划<el-icon><CirclePlusFilled /></el-icon>
        </el-button>
    </div>
  <!-- 表格 -->
    <div class="table-container">
        <el-table :data="tableData" stripe style="width: 100%;">
            <el-table-column prop="context" label="计划内容" show-overflow-tooltip />
            <el-table-column prop="date" label="计划日期" width="190px" />
            <el-table-column prop="delete" label="操作"  width="190px">
                <template #default="scope">
                    <el-button type="danger" :icon="Delete"
                               @click="confirmDelete(scope.row.id)"/>
                </template>
            </el-table-column>
        </el-table>
    </div>
  <!-- 分页按钮 -->
    <div class="demo-pagination-block">
        <el-pagination
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>
  <!--    添加计划按钮对话框-->
    <el-dialog v-model="tableEditVisible" title="个人计划" width="500">
        <el-form :model="form"  ref="formRef" label-width="100px">
            <el-form-item label="计划内容" prop="context">
                <el-input
                        v-model="form.context"
                        style="width: 240px"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                        type="textarea"
                        placeholder="计划内容"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="reset">取消</el-button>
                <el-button type="primary" @click="submitForm">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import {CirclePlusFilled, Delete} from "@element-plus/icons-vue";
import request8090 from "../../../../utils/request8090.js";
onMounted(() => {
    fetchPlanInfo();
})
const tableEditVisible= ref(false)
// 添加计划按钮事件
const addPlan=()=>{
    tableEditVisible.value = true
}
const form = ref({
    context: ''
})
// 对话框按钮提交事件
const submitForm=()=>{
    // 发送请求
    request8090({
        url:'/student/addplan',
        method:'post',
        data:{
            snumber:sessionStorage.getItem('snumber'),
            context:form.value.context
        }
    }).then(res => {
        if (200==res.data.errorCode){
            ElMessage.success('添加成功');
            fetchPlanInfo()
            reset()
        } else {
            ElMessage.error('添加失败');
            reset()
        }
    })
        .catch(error => {
            console.error('请求失败:', error);
            ElMessage.error('请求失败');
        });
    tableEditVisible.value = false
}
// 对话框按钮取消事件
const reset=()=>{
    // tableEditVisible.value = false
    form.value.context=''
}
const tableData = ref([])
//初始化的默认分页大小
const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
});
// 获取计划数据
const fetchPlanInfo = () => {
    request8090({
        url: '/student/getplans',
        method: 'GET',
        params: { currentPage: pagination.value.currentPage, size: pagination.value.pageSize,sNumber: sessionStorage.getItem("snumber") },
    })
        .then(res => {
            if (res.data.errorCode === 200) {
                tableData.value = res.data.data.records;
                pagination.value.total = res.data.data.total;
            } else {
                ElMessage.error('获取数据失败');
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
            ElMessage.error('请求失败');
        });
}
//显示行数大小改变时刷新页面
const handleSizeChange = (size) => {
    pagination.value.pageSize = size;
    fetchPlanInfo()
}
//显示页数改变时刷新页面
const handleCurrentChange = (page) => {
    pagination.value.currentPage = page;
    fetchPlanInfo()
}

// 删除按钮事件
const handleDelete = (id) => {
    request8090({
        url: '/student/deleteplan',
        method: 'delete',
        params: {id},
    })
        .then(res => {
            if (res.data.errorCode === 200) {
                ElMessage.success('删除成功');
                fetchPlanInfo();
            } else {
                ElMessage.error('获取数据失败');
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
            ElMessage.error('请求失败');
        });
}

// 弹出确认删除框
const confirmDelete = (id) => {
    ElMessageBox.confirm(
        '此操作将永久删除该计划, 是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            handleDelete(id);
        })
        .catch(() => {
            ElMessage.info('已取消删除');
        });
};
</script>

<style scoped>

</style>